import React, { useState } from "react";
import '../FormSelect/form.css'
import { CascadePicker, Input } from "antd-mobile";
import Icon from "../Icon";
import icon_down_black from "@/assets/icon_down_black.png"

export default function AddressFormSelect({ title, list, onSelectedDataClick, ...rest }) {

    //设置日期显示状态
    const [showPicker, setShowPicker] = useState(false)

    //设置选择回调
    const onHandleSelectedPick = (data, item) => {
        console.log(data)
        try {
            //回调state city area
            onSelectedDataClick(data)
        } catch (e) {
            console.log(e)
        }
    }

    //关闭日期显示
    const onHandleCloseDate = () => {
        setShowPicker(false)
    }


    return (
        <div className="formContent">
            <span className="formTitle">{title}</span>
            <div className="formValueContent" onClick={() => { setShowPicker(true) }}>
                <Input className="formValue"  {...rest} readOnly={true} />
                <Icon picUrl={icon_down_black} onItemClick={() => { setShowPicker(true) }}></Icon>
            </div>
            <div className="formSplitLine" hidden></div>
            <CascadePicker
                className="formPicker"
                title={title}
                options={list}
                cancelText="Cancel"
                confirmText="Confirm"
                visible={showPicker}
                onClose={onHandleCloseDate}
                onConfirm={onHandleSelectedPick}
            />
        </div>
    )
}

